<!DOCTYPE html>
<html>

	<head>
		<base th:href="${#request.getContextPath()}+'/'">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>ts - 文件管理器</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<link href="css/animate.css" rel="stylesheet">
		<link href="css/layui.css" rel="stylesheet">
		<link href="css/style.css?v=4.1.0" rel="stylesheet">
		<style>
			.folder-list li .aactive i {
				color: #39aef5 !important;
			}
			
			.aactive {
				color: #39aef5 !important;
			}
			
			.hactive:hover {
				color: #39aef5 !important;
			}
			
			.file {
				border: none;
			}
			
			.file:hover {
				box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, .3);
			}
			
			.file .icon,
			.file .image {
				height: 120px;
				overflow: hidden;
			}
			
			.file .file-name {
				border: none;
			}
			
			.file .btnbox {
				height: 40px;
				text-align: center;
				line-height: 40px;
			}
			
			.file .btnbox button {
				margin-right: 10px;
			}
			
			.pagination {
				display: inline-block;
				padding-left: 0;
				margin: 20px 0;
				border-radius: 3px;
			}
			
			.pagination-lg>li:first-child>a,
			.pagination-lg>li:first-child>span {
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
			}
			
			.pagination-lg>li:last-child>a,
			.pagination-lg>li:last-child>span {
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
			}
			
			.pagination-lg>li>a,
			.pagination-lg>li>span {
				font-size: 14px;
			}
			
			.noData {
				margin: 20px 0;
				text-align: center;
				color: #666;
			}
		</style>
	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content" id="app">
			<div class="row">
				<div class="col-sm-3">
					<div class="ibox float-e-margins">
						<div class="ibox-content">
							<div class="file-manager">
								<button type="button" class="layui-btn layui-btn-normal" id="test1"><i class="fa fa-cloud"></i>上传文件</button>
								<div class="hr-line-dashed"></div>
								<ul class="folder-list" style="padding: 0">
									<li>
										<a href="javascript:void(0)" class="file-control hactive" :class="{'aactive':type === ''}" v-on:click="changeType('')"><i class="fa fa-folder"></i>所有文件</a>
									</li>

									<li>
										<a href="javascript:void(0)" class="file-control hactive" :class="{'aactive':type === 0}" v-on:click="changeType(0)"><i class="fa fa-folder"></i>图片</a>
									</li>

									<li>
										<a href="javascript:void(0)" :class="{'aactive':type === 1}" v-on:click="changeType(1)" class="file-control hactive"><i class="fa fa-folder"></i>文档</a>
									</li>

									<li>
										<a href="javascript:void(0)" v-on:click="changeType(2)" :class="{'aactive':type === 2}" class="file-control hactive"><i class="fa fa-folder"></i>视频</a>
									</li>

									<li>
										<a href="javascript:void(0)" v-on:click="changeType(3)" :class="{'aactive':type === 3}" class="file-control hactive"><i class="fa fa-folder"></i>音乐</a>
									</li>
									<li>
										<a href="javascript:void(0)" v-on:click="changeType(99)" :class="{'aactive':type === 99}" class="file-control hactive"><i class="fa fa-folder"></i>其他</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-9 animated fadeInRight">
					<div class="row">
						<div class="col-sm-12" v-if="rows.length">
							<div class="file-box" v-for="row in rows">
								<div class="file">
									<!--<span class="corner"></span>-->
									<div class="file-name">
										<small>{{row.createDate}}</small>
									</div>
									<div class="image">
										<img alt="image" class="img-responsive" :src="app.ctx+row.url">
									</div>
									<div class="btnbox">
										<button class="btn btn-warning btn-xs copy" :url="app.ctx+row.url">复制</button>
										<button class="btn btn-danger btn-xs" @click="remove(row.id)">删除</button>
									</div>
								</div>
							</div>
							<div id="incomeNum"></div>
						</div>
						<div class="noData" v-else>暂无该类文件数据</div>
					</div>
					<div>
						<ul id="page"></ul>
					</div>
				</div>
			</div>
		</div>

		<!-- 全局js -->
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>
		<script src="js/bootstrap-paginator.min.js"></script>

		<script src="js/content.js?v=1.0.0"></script>
		<script src="js/layui.js"></script>
		<script src="js/plugins/clipboard/clipboard.min.js"></script>
		<script src="js/plugins/layer/layer.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					limit: 12,
					offset: 0,
					total: 0,
					file: '',
					type: '',
					rows: '',
					ctx:top.ctx
				},
				methods: {
					getData: function() {
						$.getJSON(top.ctx + "/common/sysFile/list", {
							limit: this.limit,
							offset: this.offset,
							type: this.type
						}, function(r) {
							app.total = r.total;
							app.rows = r.rows;
							app.page();
						});
					},
					page: function() {
						var options = {
							currentPage: app.offset / 12 + 1, //当前页
							totalPages: Math.ceil(app.total / 12), //总页数
							numberofPages: 4, //显示的页数
							bootstrapMajorVersion: 3,
							alignment: 'center',
							size: 'large',
							shouldShowPage: true,
							itemTexts: function(type, page, current) { //修改显示文字
								switch(type) {
									case "first":
										return "首页";
									case "prev":
										return "上一页";
									case "next":
										return "下一页";
									case "last":
										return "尾页";
									case "page":
										return page;
								}
							},
							onPageClicked: function(event, originalEvent, type, page) {
								app.offset = (page - 1) * 12;
								app.getData();
							}
						};
						if(app.total) {
							$('#page').bootstrapPaginator(options);
							$('#page').show();
						} else {
							$('#page').hide();
						}
					},
					remove: function(id) {
						layer.confirm('确定要删除选中的记录？', {
							btn: ['确定', '取消']
						}, function() {
							$.ajax({
								url: top.ctx + "/common/sysFile/remove",
								type: "post",
								data: {
									'id': id
								},
								success: function(r) {
									if(r.code == 0) {
										layer.msg(r.msg);
										app.getData();
									} else {
										layer.msg(r.msg);
										app.getData();
									}
								}
							});
						})
					},
					changeType: function(i) {
						this.type = i;
						this.offset = 0;
						this.getData();
					}
				},
				created: function() {
					this.changeType('')
				}
			});
		</script>
		<script type="text/javascript">
			var clipboard = new Clipboard('button.copy', {
				text: function(trigger) {
					layer.msg('文件路径已复制到粘贴板');
					return window.location.host+$(trigger).attr('url');
				}
			});
			layui.use('upload', function() {
				var upload = layui.upload;
				//执行实例
				var uploadInst = upload.render({
					elem: '#test1', //绑定元素
					url: top.ctx + '/common/sysFile/upload', //上传接口
					size: 1000,
					accept: 'file',
					done: function(r) {
						layer.msg(r.msg);
						app.getData();
					},
					error: function(r) {
						layer.msg(r.msg);
					}
				});
			});

			// function changeType(i) {
			//     app.type = i;
			//     app.offset = 0;
			//     app.getData();
			// }
		</script>
	</body>

</html>